<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <title>Document</title>
    <!-- 在 Leaflet 中，map panes 隐式地将图层组合在一起 -->
    <!-- Map panes 使用 z-index CSS 属性来让某些图层始终显示在其他图层之上。默认的排序是：

    TileLayer 和 GridLayer
    Path, 如线、折线、圆或 GeoJSON 图层
    Marker 阴影
    Marker 图标
    Popup -->
  </head>
  <body>
    <div
      id="map"
      style="height: 500px; width: 900px"
    ></div>
    <script>
      // videoOverlay 栅格图层，扩展自 ImageOverlay
      // 1、添加底图
      var map = L.map('map').setView([37.8, -96], 4);

      var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution:
          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      }).addTo(map);
      // 2、L.videoOverlay添加视频覆盖物
      var videoUrls = [
        'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
        'https://www.mapbox.com/bites/00188/patricia_nasa.mp4',
      ];
      var errorOverlayUrl =
        'https://cdn-icons-png.flaticon.com/512/110/110686.png';
      var latLngBounds = L.latLngBounds([
        [32, -130],
        [13, -100],
      ]); // 地理位置边界

      var videoOverlay = L.videoOverlay(videoUrls, latLngBounds, {
        opacity: 0.8,
        errorOverlayUrl: errorOverlayUrl,
        interactive: true,
        autoplay: true,
        muted: true,
        playsInline: true,
      }).addTo(map);
      //  L.VideoOverlay 类中并没有 play() 或者 pause() 方法。
      // 视频覆盖物的 getElement() 方法是十分有用的。
      //   对于覆盖物来说，它返回 HTMLVideoElement (继承自 HTMLMediaElement) —— 并且它的方法就像 play() 和 pause() 一样。
      videoOverlay.getElement().pause();
      // 构建一个 L.Control 的小子类，以便在加载后播放/暂停此视频覆盖物
      videoOverlay.on('load', function () {
        var MyPauseControl = L.Control.extend({
          onAdd: function () {
            var button = L.DomUtil.create('button');
            button.title = 'Pause';
            button.innerHTML = '<span aria-hidden="true">⏸</span>';
            L.DomEvent.on(button, 'click', function () {
              videoOverlay.getElement().pause();
            });
            return button;
          },
        });
        var MyPlayControl = L.Control.extend({
          onAdd: function () {
            var button = L.DomUtil.create('button');
            button.title = 'Play';
            button.innerHTML = '<span aria-hidden="true">▶️</span>';
            L.DomEvent.on(button, 'click', function () {
              videoOverlay.getElement().play();
            });
            return button;
          },
        });

        var pauseControl = new MyPauseControl().addTo(map);
        var playControl = new MyPlayControl().addTo(map);
      });
    </script>
  </body>
</html>
